<template>
	<!-- 行业分析 -->
	<view class="trade">
		<view class="latest-news-box" v-for="(item,index) in list" :key="index" @click="details(item)">
			<view class="latest-news-image">
				<image :src="item.images" mode=""></image>
			</view>

			<view class="latest-news-tearst">
				<view class="">
					{{item.name}}
				</view>
				<view style="color: #808080;">
					<text style="padding-left: 15px;"></text>{{item.navicontenttf}}
					<!-- <text>{{item.navicontenttf}}</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'
	import {share} from '@/mixins/index.js'
	export default {
		mixins:[share],
		data() {
			return {
				list: [],
				navicontenttf:''
			}
		},

		mounted() {
			api.pageApi('cms.news', 3, 999, "").then(res => {
				this.list = res.data
			})
		},


		methods: {
			details(val) {
				// let value = JSON.stringify(val)
				// uni.navigateTo({
				// 	url:`./components/industryDetails?val=${value}`
				// })
				var id = val.id;
				uni.navigateTo({
					url: `/pages/home/industry/components/industryDetails?id=${id}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.industry {
		width: 100vw;
		height: 100%;
		background-color: #EEEEEE;
	}

	.latest-news-box {
		margin-top: 20rpx;
		padding: 10rpx 32rpx 40rpx;
		display: flex;
		background-color: #FFFFFF;

		.latest-news-image {
			width: 40%;
			height: 180rpx;
			background-color: #EBEEF5;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.latest-news-tearst {
			width: 60%;
			height: 180rpx;
			margin-left: 15rpx;
		}

		.latest-news-tearst :nth-child(1) {
			font-size: 30rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.latest-news-tearst :nth-child(2) {
			font-size: 28rpx;
			// word-break: break-all;
			color: #808080;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
		}
	}
</style>
